<template>
  <div class="chat-list-wrap flex-auto" ref="chatListWrapRef">
    <div class="chat-list" ref="chatListRef">
      <template v-for="(cl, i) of chatList">
        <div class="question" :key="i + 1">
          <div v-if="cl.fileList && cl.fileList.length" class="attachment-items">
            <div v-for="(file, _i) of cl.fileList" :key="_i" class="ab-item">
              <div class="ab-item-icon">
                <svg
                  v-if="isImageByMIME(file.raw.type) || isImageByExtension(file.raw.type)"
                  width="32"
                  height="32"
                  viewBox="0 0 32 32"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M21.4237 7H10.5763C8.04887 7 6 8.94521 6 11.3447V20.6544C6 23.054 8.04887 24.9992 10.5763 24.9992H21.4237C23.9511 24.9992 26 23.054 26 20.6544V11.3447C26 8.94521 23.9511 7 21.4237 7Z"
                    fill="#9AD2EC"
                  ></path>
                  <path
                    d="M11.3448 14.2014C12.3922 14.2014 13.2413 13.3955 13.2413 12.4015C13.2413 11.4074 12.3922 10.6016 11.3448 10.6016C10.2974 10.6016 9.44824 11.4074 9.44824 12.4015C9.44824 13.3955 10.2974 14.2014 11.3448 14.2014Z"
                    fill="white"
                  ></path>
                  <path
                    d="M25.9989 15.4688L21.3278 19.2012C20.7752 19.6428 20.0993 19.9222 19.3825 20.0054C18.6656 20.0886 17.9387 19.972 17.2904 19.6699L13.5988 17.9489C13.0423 17.6896 12.4264 17.5663 11.8069 17.5902C11.1875 17.6141 10.5841 17.7845 10.0516 18.0859L6.00098 20.3788V20.6554C6.00089 21.226 6.11915 21.7909 6.34906 22.318C6.57896 22.8452 6.91598 23.3241 7.34087 23.7276C7.76576 24.131 8.27022 24.4511 8.82541 24.6694C9.38059 24.8878 9.97563 25.0002 10.5766 25.0002H21.4247C22.6381 24.9998 23.8017 24.5419 24.6595 23.7271C25.5173 22.9123 25.9991 21.8074 25.9989 20.6554V15.4688Z"
                    fill="#4579C7"
                  ></path>
                </svg>
                <svg v-else width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M7 9C7 6.79086 8.79086 5 11 5L18.6383 5C19.1906 5 19.6383 5.44772 19.6383 6V6.92308C19.6383 9.13222 21.4292 10.9231 23.6383 10.9231H24C24.5523 10.9231 25 11.3708 25 11.9231V23C25 25.2091 23.2091 27 21 27H11C8.79086 27 7 25.2091 7 23V9Z"
                    fill="#F8CA27"
                  ></path>
                  <g filter="url(#filter0_d_602_422)">
                    <path
                      d="M19.6602 6.92458V5.84766L24.4126 10.9246H23.6602C21.451 10.9246 19.6602 9.13372 19.6602 6.92458Z"
                      fill="#F8EDC7"
                    ></path>
                  </g>
                  <path
                    d="M20.2557 12H11.7443C11.3332 12 11 12.3358 11 12.75C11 13.1642 11.3332 13.5 11.7443 13.5H20.2557C20.6668 13.5 21 13.1642 21 12.75C21 12.3358 20.6668 12 20.2557 12Z"
                    fill="#F8EDC7"
                  ></path>
                  <path
                    d="M20.2557 16L11.7443 16.0017C11.3332 16.0017 11 16.3371 11 16.7509C11 17.1646 11.3332 17.5 11.7443 17.5L20.2557 17.4983C20.6668 17.4983 21 17.1629 21 16.7491C21 16.3354 20.6668 16 20.2557 16Z"
                    fill="#F8EDC7"
                  ></path>
                  <path
                    d="M15.3575 20H11.6425C11.2876 20 11 20.3358 11 20.75C11 21.1642 11.2876 21.5 11.6425 21.5H15.3575C15.7124 21.5 16 21.1642 16 20.75C16 20.3358 15.7124 20 15.3575 20Z"
                    fill="#F8EDC7"
                  ></path>
                  <defs>
                    <filter
                      id="filter0_d_602_422"
                      x="19.1602"
                      y="5.34766"
                      width="7.75195"
                      height="8.07617"
                      filterUnits="userSpaceOnUse"
                      color-interpolation-filters="sRGB"
                    >
                      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                      <feColorMatrix
                        in="SourceAlpha"
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha"
                      ></feColorMatrix>
                      <feOffset dx="1" dy="1"></feOffset>
                      <feGaussianBlur stdDeviation="0.75"></feGaussianBlur>
                      <feComposite in2="hardAlpha" operator="out"></feComposite>
                      <feColorMatrix
                        type="matrix"
                        values="0 0 0 0 0.591623 0 0 0 0 0.452482 0 0 0 0 0.0698445 0 0 0 0.25 0"
                      ></feColorMatrix>
                      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_602_422"></feBlend>
                      <feBlend
                        mode="normal"
                        in="SourceGraphic"
                        in2="effect1_dropShadow_602_422"
                        result="shape"
                      ></feBlend>
                    </filter>
                  </defs>
                </svg>
              </div>
              <div class="ab-item-info">
                <p class="abi-info1 ellipsis">{{ file.name }}</p>
                <p class="abi-info2 ellipsis">
                  {{ getFileExtension(file.name) + ' ' + formatFileSize(file.size) }}
                </p>
              </div>
            </div>
          </div>
          <div class="question-text">{{ cl.question }}</div>
        </div>
        <div class="answer d-flex" :key="-i">
          <div class="answer-avatar">
           <!--  <svg
              viewBox="0 0 30 30"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <path
                id="path"
                d="M27.501 8.46875C27.249 8.3457 27.1406 8.58008 26.9932 8.69922C26.9434 8.73828 26.9004 8.78906 26.8584 8.83398C26.4902 9.22852 26.0605 9.48633 25.5 9.45508C24.6787 9.41016 23.9785 9.66797 23.3594 10.2969C23.2275 9.52148 22.79 9.05859 22.125 8.76172C21.7764 8.60742 21.4238 8.45312 21.1807 8.11719C21.0098 7.87891 20.9639 7.61328 20.8779 7.35156C20.8242 7.19336 20.7695 7.03125 20.5879 7.00391C20.3906 6.97266 20.3135 7.13867 20.2363 7.27734C19.9258 7.84375 19.8066 8.46875 19.8174 9.10156C19.8447 10.5234 20.4453 11.6562 21.6367 12.4629C21.7725 12.5547 21.8076 12.6484 21.7646 12.7832C21.6836 13.0605 21.5869 13.3301 21.501 13.6074C21.4473 13.7852 21.3662 13.8242 21.1768 13.7461C20.5225 13.4727 19.957 13.0684 19.458 12.5781C18.6104 11.7578 17.8438 10.8516 16.8877 10.1426C16.6631 9.97656 16.4395 9.82227 16.207 9.67578C15.2314 8.72656 16.335 7.94727 16.5898 7.85547C16.8574 7.75977 16.6826 7.42773 15.8193 7.43164C14.957 7.43555 14.167 7.72461 13.1611 8.10938C13.0137 8.16797 12.8594 8.21094 12.7002 8.24414C11.7871 8.07227 10.8389 8.0332 9.84766 8.14453C7.98242 8.35352 6.49219 9.23633 5.39648 10.7441C4.08105 12.5547 3.77148 14.6133 4.15039 16.7617C4.54883 19.0234 5.70215 20.8984 7.47559 22.3633C9.31348 23.8809 11.4307 24.625 13.8457 24.4824C15.3125 24.3984 16.9463 24.2012 18.7881 22.6406C19.2529 22.8711 19.7402 22.9629 20.5498 23.0332C21.1729 23.0918 21.7725 23.002 22.2373 22.9062C22.9648 22.752 22.9141 22.0781 22.6514 21.9531C20.5186 20.959 20.9863 21.3633 20.5605 21.0371C21.6445 19.752 23.2783 18.418 23.917 14.0977C23.9668 13.7539 23.9238 13.5391 23.917 13.2598C23.9131 13.0918 23.9512 13.0254 24.1445 13.0059C24.6787 12.9453 25.1973 12.7988 25.6738 12.5352C27.0557 11.7793 27.6123 10.5391 27.7441 9.05078C27.7637 8.82422 27.7402 8.58789 27.501 8.46875ZM15.46 21.8613C13.3926 20.2344 12.3906 19.6992 11.9766 19.7227C11.5898 19.7441 11.6592 20.1875 11.7441 20.4766C11.833 20.7617 11.9492 20.959 12.1123 21.209C12.2246 21.375 12.3018 21.623 12 21.8066C11.334 22.2207 10.1768 21.668 10.1221 21.6406C8.77539 20.8477 7.64941 19.7988 6.85547 18.3652C6.08984 16.9844 5.64453 15.5039 5.57129 13.9238C5.55176 13.541 5.66406 13.4062 6.04297 13.3379C6.54199 13.2461 7.05762 13.2266 7.55664 13.2988C9.66602 13.6074 11.4619 14.5527 12.9668 16.0469C13.8262 16.9004 14.4766 17.918 15.1465 18.9121C15.8584 19.9688 16.625 20.9746 17.6006 21.7988C17.9443 22.0879 18.2197 22.3086 18.4824 22.4707C17.6895 22.5586 16.3652 22.5781 15.46 21.8613ZM16.4502 15.4805C16.4502 15.3105 16.5859 15.1758 16.7568 15.1758C16.7949 15.1758 16.8301 15.1836 16.8613 15.1953C16.9033 15.2109 16.9424 15.2344 16.9727 15.2695C17.0273 15.3223 17.0586 15.4004 17.0586 15.4805C17.0586 15.6504 16.9229 15.7852 16.7529 15.7852C16.582 15.7852 16.4502 15.6504 16.4502 15.4805ZM19.5273 17.0625C19.3301 17.1426 19.1328 17.2129 18.9434 17.2207C18.6494 17.2344 18.3281 17.1152 18.1533 16.9688C17.8828 16.7422 17.6895 16.6152 17.6074 16.2168C17.5732 16.0469 17.5928 15.7852 17.623 15.6348C17.6934 15.3105 17.6152 15.1035 17.3877 14.9141C17.2012 14.7598 16.9658 14.7188 16.7061 14.7188C16.6094 14.7188 16.5205 14.6758 16.4541 14.6406C16.3457 14.5859 16.2568 14.4512 16.3418 14.2852C16.3691 14.2324 16.501 14.1016 16.5322 14.0781C16.8838 13.877 17.29 13.9434 17.666 14.0938C18.0146 14.2363 18.2773 14.498 18.6562 14.8672C19.0439 15.3145 19.1133 15.4395 19.334 15.7734C19.5078 16.0371 19.667 16.3066 19.7754 16.6152C19.8408 16.8066 19.7559 16.9648 19.5273 17.0625Z"
                fill-rule="nonzero"
                fill="#4D6BFE"
              ></path>
            </svg> -->
            <IconLogo />
          </div>
          <div class="answer-text">
            <!-- <p v-if="loadingChat && i === chatList.length" v-loading="true" class="loading"></p> -->
            <p v-if="cl.loadingChat" v-loading="true" class="loading"></p>
            <div v-if="cl.thoughts" class="thoughts-text">{{ cl.thoughts_reveal }}</div>
            <hr v-if="cl.thoughts && cl.showSplitLine" />
            <markdown-it-vue class="md-body" :content="cl.answer_reveal" />
          </div>
          <div class="answer-btns" v-if="cl.showBtns">
            <el-tooltip class="item" effect="dark" content="复制" placement="top">
              <button class="button-empty-style" style="font-size: 20px; width: 20px; height: 20px" @click="handleChatCopy(cl)">
                <svg
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <defs>
                    <clipPath id="clip1248_20193">
                      <rect
                        id="鍥惧眰_1"
                        width="17.052675"
                        height="17.052441"
                        transform="translate(1.000000 1.000000)"
                        fill="white"
                        fill-opacity="0"
                      ></rect>
                    </clipPath>
                    <clipPath id="clip1257_20794">
                      <rect id="复制" width="20.000000" height="20.000000" fill="white" fill-opacity="0"></rect>
                    </clipPath>
                  </defs>
                  <g clip-path="url(#clip1257_20794)">
                    <g clip-path="url(#clip1248_20193)">
                      <path
                        id="path"
                        d="M5.03 14.64C4.77 14.64 4.5 14.62 4.24 14.56C3.98 14.51 3.73 14.43 3.49 14.33C3.24 14.23 3.01 14.1 2.79 13.96C2.57 13.81 2.37 13.64 2.18 13.45C1.99 13.26 1.82 13.05 1.68 12.83C1.53 12.61 1.4 12.37 1.3 12.13C1.2 11.88 1.13 11.63 1.07 11.36C1.02 11.1 1 10.84 1 10.57L1 5.07C1 4.8 1.02 4.54 1.07 4.27C1.13 4.01 1.2 3.76 1.3 3.51C1.4 3.26 1.53 3.03 1.68 2.81C1.82 2.58 1.99 2.38 2.18 2.19C2.37 2 2.57 1.83 2.79 1.68C3.01 1.53 3.24 1.41 3.49 1.31C3.73 1.2 3.98 1.13 4.24 1.07C4.5 1.02 4.77 1 5.03 1L10.49 1C10.75 1 11.01 1.02 11.27 1.07C11.53 1.13 11.78 1.2 12.03 1.31C12.27 1.41 12.51 1.53 12.73 1.68C12.95 1.83 13.15 2 13.34 2.19C13.53 2.38 13.69 2.58 13.84 2.81C13.99 3.03 14.11 3.26 14.21 3.51C14.31 3.76 14.39 4.01 14.44 4.27C14.5 4.54 14.52 4.8 14.52 5.07L12.94 5.07C12.94 4.91 12.92 4.75 12.89 4.58C12.86 4.43 12.81 4.27 12.75 4.12C12.69 3.97 12.61 3.83 12.52 3.69C12.43 3.56 12.33 3.43 12.22 3.32C12.1 3.2 11.98 3.1 11.85 3.01C11.71 2.92 11.57 2.84 11.42 2.78C11.27 2.72 11.12 2.67 10.96 2.64C10.81 2.61 10.65 2.59 10.49 2.59L5.03 2.59C4.87 2.59 4.71 2.61 4.55 2.64C4.4 2.67 4.24 2.72 4.09 2.78C3.95 2.84 3.8 2.92 3.67 3.01C3.54 3.1 3.41 3.2 3.3 3.32C3.18 3.43 3.08 3.56 2.99 3.69C2.9 3.83 2.83 3.97 2.77 4.12C2.71 4.27 2.66 4.43 2.63 4.58C2.6 4.75 2.58 4.91 2.58 5.07L2.58 10.57C2.58 10.73 2.6 10.89 2.63 11.05C2.66 11.21 2.71 11.37 2.77 11.52C2.83 11.67 2.9 11.81 2.99 11.94C3.08 12.08 3.18 12.2 3.3 12.32C3.41 12.43 3.54 12.54 3.67 12.63C3.8 12.72 3.95 12.79 4.09 12.86C4.24 12.92 4.4 12.96 4.55 13C4.71 13.03 4.87 13.04 5.03 13.04L5.03 14.64Z"
                        fill="currentColor"
                        fill-opacity="1.000000"
                        fill-rule="evenodd"
                      ></path>
                    </g>
                    <path
                      id="path"
                      d="M14.75 18.91L9.3 18.91C9.03 18.91 8.77 18.88 8.51 18.83C8.25 18.78 8 18.7 7.75 18.6C7.51 18.49 7.27 18.37 7.05 18.22C6.83 18.07 6.63 17.9 6.44 17.71C6.25 17.52 6.09 17.32 5.94 17.1C5.79 16.87 5.67 16.64 5.57 16.39C5.47 16.14 5.39 15.89 5.34 15.63C5.28 15.37 5.26 15.1 5.26 14.83L5.26 9.33C5.26 9.06 5.28 8.8 5.34 8.54C5.39 8.28 5.47 8.02 5.57 7.77C5.67 7.53 5.79 7.29 5.94 7.07C6.09 6.85 6.25 6.64 6.44 6.45C6.63 6.26 6.83 6.09 7.05 5.95C7.27 5.8 7.51 5.67 7.75 5.57C8 5.47 8.25 5.39 8.51 5.34C8.77 5.29 9.03 5.26 9.3 5.26L14.75 5.26C15.01 5.26 15.28 5.29 15.54 5.34C15.8 5.39 16.05 5.47 16.29 5.57C16.54 5.67 16.77 5.8 16.99 5.95C17.21 6.09 17.41 6.26 17.6 6.45C17.79 6.64 17.96 6.85 18.1 7.07C18.25 7.29 18.37 7.53 18.48 7.77C18.58 8.02 18.65 8.28 18.71 8.54C18.76 8.8 18.78 9.06 18.78 9.33L18.78 14.83C18.78 15.1 18.76 15.37 18.71 15.63C18.65 15.89 18.58 16.14 18.48 16.39C18.37 16.64 18.25 16.87 18.1 17.1C17.96 17.32 17.79 17.52 17.6 17.71C17.41 17.9 17.21 18.07 16.99 18.22C16.77 18.37 16.54 18.49 16.29 18.6C16.05 18.7 15.8 18.78 15.54 18.83C15.28 18.88 15.01 18.91 14.75 18.91ZM9.3 6.86C9.13 6.86 8.97 6.87 8.82 6.91C8.66 6.94 8.51 6.98 8.36 7.05C8.21 7.11 8.07 7.18 7.93 7.28C7.8 7.37 7.68 7.47 7.56 7.58C7.45 7.7 7.35 7.82 7.26 7.96C7.17 8.09 7.09 8.24 7.03 8.38C6.97 8.54 6.92 8.69 6.89 8.85C6.86 9.01 6.84 9.17 6.84 9.33L6.84 14.83C6.84 15 6.86 15.16 6.89 15.32C6.92 15.48 6.97 15.63 7.03 15.78C7.09 15.93 7.17 16.07 7.26 16.21C7.35 16.34 7.45 16.47 7.56 16.58C7.68 16.7 7.8 16.8 7.93 16.89C8.07 16.98 8.21 17.06 8.36 17.12C8.51 17.18 8.66 17.23 8.82 17.26C8.97 17.29 9.13 17.31 9.3 17.31L14.75 17.31C14.91 17.31 15.07 17.29 15.23 17.26C15.38 17.23 15.54 17.18 15.69 17.12C15.83 17.06 15.98 16.98 16.11 16.89C16.24 16.8 16.37 16.7 16.48 16.58C16.59 16.47 16.7 16.34 16.79 16.21C16.87 16.07 16.95 15.93 17.01 15.78C17.07 15.63 17.12 15.48 17.15 15.32C17.18 15.16 17.2 15 17.2 14.83L17.2 9.33C17.2 9.17 17.18 9.01 17.15 8.85C17.12 8.69 17.07 8.54 17.01 8.38C16.95 8.24 16.87 8.09 16.79 7.96C16.7 7.82 16.59 7.7 16.48 7.58C16.37 7.47 16.24 7.37 16.11 7.28C15.98 7.19 15.83 7.11 15.69 7.05C15.54 6.98 15.38 6.94 15.23 6.91C15.07 6.87 14.91 6.86 14.75 6.86L9.3 6.86Z"
                      fill="currentColor"
                      fill-opacity="1.000000"
                      fill-rule="nonzero"
                    ></path>
                  </g>
                </svg>
              </button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="重新生成" placement="top">
              <button class="button-empty-style" style="font-size: 20px; width: 20px; height: 20px" @click="handleChatReBuild(cl)">
                <svg
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <defs>
                    <clipPath id="clip1258_20811">
                      <rect id="重新生成" width="20.000000" height="20.000000" fill="white" fill-opacity="0"></rect>
                    </clipPath>
                  </defs>
                  <rect id="重新生成" width="20.000000" height="20.000000" fill="#FFFFFF" fill-opacity="0"></rect>
                  <g clip-path="url(#clip1258_20811)">
                    <path
                      id="path"
                      d="M17.01 7.63L13.98 7.62C13.88 7.62 13.79 7.6 13.7 7.56C13.62 7.52 13.54 7.47 13.47 7.4C13.4 7.33 13.35 7.25 13.32 7.16C13.28 7.07 13.26 6.98 13.26 6.88C13.26 6.79 13.28 6.69 13.32 6.6C13.35 6.51 13.4 6.43 13.47 6.36C13.54 6.3 13.62 6.24 13.7 6.21C13.79 6.17 13.88 6.15 13.98 6.15L15.57 6.16C15.67 6.16 15.76 6.14 15.85 6.1C15.94 6.06 16.01 6.01 16.08 5.94C16.15 5.87 16.2 5.79 16.23 5.7C16.27 5.61 16.29 5.52 16.29 5.42L16.3 3.89C16.3 3.79 16.32 3.7 16.36 3.61C16.39 3.52 16.44 3.44 16.51 3.37C16.58 3.3 16.66 3.25 16.74 3.21C16.83 3.17 16.92 3.16 17.02 3.16C17.11 3.16 17.2 3.17 17.29 3.21C17.38 3.25 17.46 3.3 17.52 3.37C17.59 3.44 17.64 3.52 17.68 3.61C17.71 3.7 17.73 3.79 17.73 3.89L17.72 6.9C17.72 7 17.71 7.09 17.67 7.18C17.63 7.27 17.58 7.34 17.52 7.41C17.45 7.48 17.37 7.53 17.29 7.57C17.2 7.61 17.11 7.63 17.01 7.63Z"
                      fill="currentColor"
                      fill-opacity="1.000000"
                      fill-rule="nonzero"
                    ></path>
                    <path
                      id="path"
                      d="M2.31 16.29L2.32 13.3C2.32 13.21 2.34 13.11 2.37 13.02C2.41 12.93 2.46 12.85 2.53 12.78C2.6 12.71 2.67 12.66 2.76 12.62C2.85 12.58 2.94 12.56 3.03 12.56L6.07 12.57C6.16 12.57 6.25 12.59 6.34 12.63C6.43 12.67 6.51 12.72 6.57 12.79C6.64 12.86 6.69 12.94 6.73 13.03C6.76 13.12 6.78 13.22 6.78 13.32C6.78 13.41 6.76 13.51 6.73 13.6C6.69 13.69 6.64 13.77 6.57 13.84C6.51 13.91 6.43 13.96 6.34 14C6.25 14.04 6.16 14.06 6.07 14.06L4.47 14.05C4.38 14.05 4.29 14.07 4.2 14.11C4.11 14.15 4.03 14.2 3.97 14.27C3.9 14.34 3.85 14.42 3.81 14.51C3.78 14.6 3.76 14.7 3.76 14.8L3.75 16.29C3.75 16.39 3.73 16.48 3.69 16.58C3.65 16.67 3.6 16.75 3.54 16.82C3.47 16.89 3.39 16.94 3.3 16.98C3.22 17.01 3.13 17.03 3.03 17.03C2.94 17.03 2.85 17.02 2.76 16.98C2.67 16.94 2.59 16.89 2.52 16.82C2.46 16.75 2.4 16.67 2.37 16.58C2.33 16.49 2.31 16.39 2.31 16.29Z"
                      fill="currentColor"
                      fill-opacity="1.000000"
                      fill-rule="nonzero"
                    ></path>
                    <path
                      id="path"
                      d="M9.88 18.01C9.51 18.01 9.15 17.99 8.79 17.94C8.42 17.89 8.07 17.82 7.71 17.73C7.36 17.63 7.02 17.51 6.68 17.37C6.34 17.23 6.02 17.07 5.7 16.89C5.39 16.7 5.09 16.5 4.8 16.28C4.52 16.05 4.25 15.81 3.99 15.55C3.74 15.29 3.5 15.02 3.29 14.73C3.07 14.44 2.88 14.13 2.7 13.82L4.15 13.05C4.32 13.35 4.51 13.64 4.72 13.91C4.93 14.18 5.17 14.43 5.42 14.66C5.67 14.9 5.94 15.11 6.23 15.3C6.52 15.49 6.83 15.66 7.14 15.81C7.46 15.95 7.78 16.07 8.12 16.16C8.45 16.25 8.8 16.32 9.14 16.36C9.49 16.39 9.83 16.4 10.18 16.39C10.53 16.37 10.87 16.33 11.22 16.26C11.56 16.19 11.89 16.09 12.21 15.97C12.54 15.84 12.85 15.7 13.15 15.53C13.45 15.35 13.74 15.16 14.01 14.94C14.28 14.72 14.53 14.49 14.76 14.23C14.99 13.97 15.2 13.7 15.38 13.41C15.57 13.12 15.73 12.82 15.87 12.5C16 12.19 16.11 11.87 16.2 11.53C16.28 11.2 16.34 10.87 16.36 10.52C16.37 10.42 16.4 10.33 16.44 10.24C16.48 10.15 16.54 10.07 16.61 10C16.69 9.93 16.77 9.87 16.86 9.84C16.96 9.8 17.05 9.77 17.16 9.77C17.27 9.77 17.38 9.79 17.49 9.83C17.6 9.87 17.7 9.94 17.78 10.02C17.86 10.1 17.92 10.2 17.96 10.3C18 10.41 18.01 10.52 18 10.64C17.98 10.89 17.95 11.13 17.91 11.38C17.86 11.62 17.81 11.87 17.74 12.11C17.68 12.35 17.6 12.58 17.51 12.82C17.42 13.05 17.32 13.28 17.21 13.5C17.1 13.73 16.98 13.95 16.85 14.16C16.71 14.37 16.57 14.58 16.42 14.78C16.27 14.98 16.11 15.17 15.94 15.36C15.77 15.54 15.59 15.72 15.41 15.89C15.22 16.06 15.03 16.22 14.83 16.37C14.63 16.52 14.42 16.66 14.2 16.79C13.99 16.93 13.77 17.05 13.54 17.16C13.31 17.27 13.08 17.37 12.85 17.46C12.61 17.55 12.37 17.63 12.13 17.7C11.88 17.77 11.64 17.83 11.39 17.87C11.14 17.92 10.89 17.96 10.63 17.98C10.38 18 10.13 18.01 9.88 18.01Z"
                      fill="currentColor"
                      fill-opacity="1.000000"
                      fill-rule="nonzero"
                    ></path>
                    <path
                      id="path"
                      d="M2.85 10.27C2.73 10.28 2.62 10.26 2.51 10.22C2.4 10.17 2.31 10.11 2.23 10.03C2.14 9.95 2.08 9.85 2.04 9.74C2 9.63 1.99 9.52 2 9.41C2.03 8.98 2.1 8.56 2.2 8.15C2.3 7.73 2.43 7.33 2.6 6.94C2.76 6.54 2.96 6.16 3.19 5.8C3.41 5.44 3.67 5.1 3.95 4.77C4.24 4.45 4.54 4.15 4.88 3.88C5.21 3.6 5.56 3.35 5.93 3.13C6.3 2.91 6.69 2.73 7.09 2.57C7.5 2.41 7.91 2.28 8.33 2.19C8.75 2.09 9.18 2.03 9.62 2.01C10.05 1.98 10.48 1.99 10.91 2.03C11.35 2.07 11.77 2.14 12.19 2.25C12.61 2.36 13.02 2.5 13.42 2.67C13.81 2.84 14.19 3.04 14.56 3.28C14.92 3.51 15.27 3.77 15.59 4.05C15.91 4.34 16.21 4.64 16.48 4.98C16.75 5.31 17 5.66 17.21 6.03L15.78 6.83C15.61 6.54 15.42 6.25 15.2 5.99C14.98 5.73 14.74 5.48 14.49 5.25C14.23 5.02 13.96 4.82 13.66 4.63C13.37 4.45 13.07 4.29 12.75 4.15C12.44 4.01 12.11 3.9 11.77 3.82C11.44 3.73 11.1 3.67 10.76 3.64C10.41 3.61 10.07 3.6 9.72 3.62C9.37 3.64 9.03 3.69 8.69 3.77C8.36 3.84 8.03 3.94 7.71 4.07C7.38 4.2 7.08 4.35 6.78 4.52C6.48 4.7 6.2 4.89 5.94 5.11C5.67 5.33 5.43 5.57 5.2 5.83C4.97 6.08 4.77 6.36 4.59 6.65C4.41 6.94 4.25 7.24 4.12 7.55C3.98 7.87 3.88 8.19 3.8 8.52C3.72 8.85 3.66 9.19 3.64 9.53C3.63 9.62 3.6 9.72 3.56 9.81C3.52 9.9 3.46 9.98 3.39 10.05C3.32 10.12 3.23 10.17 3.14 10.21C3.05 10.25 2.95 10.27 2.85 10.27Z"
                      fill="currentColor"
                      fill-opacity="1.000000"
                      fill-rule="nonzero"
                    ></path>
                  </g>
                </svg>
              </button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="喜欢" placement="top">
              <button class="button-empty-style" style="font-size: 18px; width: 18px; height: 18px">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M2.5 18c-.663 0-1.298-.294-1.767-.815A2.944 2.944 0 0 1 0 15.222V8.777c0-.737.263-1.443.732-1.964C1.202 6.293 1.837 6 2.5 6s1.299.293 1.768.813A2.94 2.94 0 0 1 5 8.777v6.445c0 .737-.264 1.443-.733 1.963-.469.521-1.104.814-1.767.815zm0-10.308a.934.934 0 0 0-.693.319c-.183.204-.287.48-.287.77v6.445c0 .288.103.565.287.77.184.204.433.319.693.32.26-.001.51-.116.693-.32.183-.205.287-.482.287-.77V8.78c0-.143-.025-.285-.074-.417a1.105 1.105 0 0 0-.212-.354.981.981 0 0 0-.318-.237.897.897 0 0 0-.376-.084v.004z"
                    fill="currentColor"
                  ></path>
                  <path
                    d="M10.352 18H7.564a3.539 3.539 0 0 1-2.519-1.062A3.658 3.658 0 0 1 4 14.378V8.281c0-.884.177-1.76.523-2.572l1.911-4.502c.142-.334.371-.622.662-.834A1.949 1.949 0 0 1 9.122.21c.32.163.59.411.782.719l.171.271c.194.312.298.673.298 1.041v1.755c0 .341.134.669.371.91.238.242.56.378.896.378h2.691a3.64 3.64 0 0 1 2.594 1.092A3.76 3.76 0 0 1 18 9.014a7.267 7.267 0 0 1-1.288 4.147l-1.602 2.325a5.84 5.84 0 0 1-2.076 1.848 5.735 5.735 0 0 1-2.682.666zM8.245 1.648h-.03a.331.331 0 0 0-.293.212L6.012 6.36a4.882 4.882 0 0 0-.39 1.92v6.095c0 .524.205 1.026.569 1.396.364.37.858.579 1.373.58h2.788c.672-.001 1.335-.166 1.931-.481a4.208 4.208 0 0 0 1.495-1.332l1.603-2.324a5.616 5.616 0 0 0 .994-3.201 2.1 2.1 0 0 0-.6-1.472 2.031 2.031 0 0 0-1.448-.61h-2.691c-.766-.001-1.5-.31-2.042-.861a2.964 2.964 0 0 1-.847-2.075V2.241a.297.297 0 0 0-.046-.16l-.17-.272a.334.334 0 0 0-.286-.16z"
                    fill="currentColor"
                  ></path>
                </svg>
              </button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="不喜欢" placement="top">
              <button class="button-empty-style" style="font-size: 20px; width: 20px; height: 20px">
                <svg
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <defs>
                    <clipPath id="clip1348_20218">
                      <rect id="点踩0718" width="20.000000" height="20.000000" fill="white" fill-opacity="0"></rect>
                    </clipPath>
                  </defs>
                  <rect id="点踩0718" width="20.000000" height="20.000000" fill="#FFFFFF" fill-opacity="0"></rect>
                  <g clip-path="url(#clip1348_20218)">
                    <path
                      id="path"
                      d="M3.71 13.17C3.53 13.17 3.36 13.16 3.18 13.12C3.01 13.09 2.84 13.04 2.67 12.97C2.51 12.9 2.35 12.82 2.2 12.72C2.05 12.62 1.92 12.51 1.79 12.38C1.66 12.25 1.55 12.12 1.45 11.97C1.35 11.82 1.27 11.67 1.2 11.5C1.13 11.34 1.08 11.17 1.05 11C1.01 10.82 1 10.65 1 10.47L1 4.19C1 4.02 1.02 3.84 1.06 3.67C1.09 3.5 1.15 3.33 1.22 3.17C1.29 3.01 1.37 2.86 1.47 2.71C1.57 2.57 1.68 2.43 1.81 2.31C1.93 2.19 2.07 2.08 2.22 1.98C2.36 1.88 2.52 1.8 2.68 1.74C2.84 1.67 3.01 1.62 3.19 1.59C3.36 1.55 3.53 1.54 3.71 1.54C3.89 1.54 4.06 1.55 4.23 1.59C4.41 1.62 4.57 1.67 4.74 1.74C4.9 1.8 5.06 1.88 5.2 1.98C5.35 2.08 5.49 2.19 5.61 2.31C5.74 2.43 5.85 2.57 5.95 2.71C6.05 2.86 6.13 3.01 6.2 3.17C6.27 3.33 6.33 3.5 6.36 3.67C6.4 3.84 6.42 4.02 6.42 4.19L6.42 10.47C6.42 10.65 6.41 10.82 6.37 11C6.34 11.17 6.28 11.34 6.22 11.5C6.15 11.67 6.06 11.82 5.97 11.97C5.87 12.12 5.75 12.25 5.63 12.38C5.5 12.51 5.36 12.62 5.22 12.72C5.07 12.82 4.91 12.9 4.75 12.97C4.58 13.04 4.41 13.09 4.24 13.12C4.06 13.16 3.89 13.17 3.71 13.17ZM3.71 3.14C3.57 3.14 3.43 3.16 3.3 3.22C3.17 3.27 3.06 3.35 2.96 3.45C2.86 3.54 2.78 3.66 2.73 3.79C2.67 3.92 2.65 4.05 2.64 4.2L2.64 10.47C2.64 10.62 2.66 10.75 2.72 10.89C2.77 11.02 2.85 11.14 2.95 11.24C3.05 11.34 3.16 11.42 3.29 11.48C3.43 11.54 3.57 11.56 3.71 11.56C3.85 11.56 3.99 11.54 4.12 11.48C4.26 11.42 4.37 11.34 4.47 11.24C4.57 11.14 4.65 11.02 4.7 10.89C4.75 10.75 4.78 10.62 4.77 10.47L4.77 4.2C4.77 4.05 4.75 3.92 4.69 3.79C4.64 3.66 4.56 3.54 4.46 3.44C4.36 3.34 4.25 3.27 4.12 3.21C3.99 3.16 3.85 3.14 3.71 3.14Z"
                      fill="currentColor"
                      fill-opacity="1.000000"
                      fill-rule="nonzero"
                    ></path>
                    <path
                      id="path"
                      d="M9.09 18.95C9.04 18.95 8.99 18.95 8.93 18.95C8.75 18.93 8.57 18.89 8.4 18.83C8.23 18.77 8.07 18.69 7.92 18.58C7.78 18.48 7.64 18.35 7.53 18.21C7.42 18.07 7.32 17.92 7.25 17.75L5.31 13.26C4.95 12.44 4.77 11.58 4.77 10.69L4.77 4.61C4.77 4.37 4.8 4.14 4.84 3.9C4.89 3.67 4.96 3.45 5.05 3.23C5.14 3.01 5.25 2.8 5.39 2.6C5.52 2.4 5.67 2.22 5.84 2.05C6.01 1.89 6.19 1.74 6.39 1.61C6.58 1.47 6.79 1.36 7.01 1.27C7.23 1.18 7.46 1.11 7.69 1.07C7.93 1.02 8.16 1 8.4 1L11.24 1C11.71 1 12.18 1.05 12.64 1.16C13.1 1.28 13.54 1.44 13.97 1.66C14.39 1.88 14.78 2.14 15.13 2.46C15.49 2.77 15.8 3.12 16.08 3.5L17.71 5.82C18.13 6.43 18.46 7.08 18.68 7.79C18.91 8.5 19.02 9.22 19.02 9.96C19.02 10.21 18.99 10.45 18.95 10.69C18.9 10.93 18.83 11.16 18.73 11.38C18.64 11.61 18.53 11.82 18.39 12.03C18.25 12.23 18.1 12.42 17.92 12.59C17.75 12.76 17.56 12.92 17.36 13.05C17.15 13.19 16.94 13.3 16.71 13.4C16.49 13.49 16.25 13.56 16.01 13.61C15.77 13.66 15.53 13.68 15.28 13.68L12.54 13.68C12.37 13.68 12.21 13.71 12.05 13.78C11.89 13.84 11.75 13.94 11.63 14.06C11.51 14.18 11.42 14.32 11.35 14.48C11.29 14.63 11.26 14.8 11.26 14.97L11.26 16.71C11.25 17.09 11.15 17.43 10.95 17.75L10.78 18.02C10.6 18.31 10.36 18.54 10.06 18.7C9.76 18.87 9.43 18.95 9.09 18.95ZM8.4 2.64C8.27 2.64 8.14 2.65 8.01 2.68C7.88 2.7 7.76 2.74 7.64 2.79C7.52 2.84 7.41 2.9 7.3 2.97C7.19 3.04 7.09 3.12 7 3.21C6.91 3.31 6.83 3.41 6.75 3.51C6.68 3.62 6.62 3.73 6.57 3.85C6.52 3.97 6.48 4.1 6.46 4.22C6.43 4.35 6.42 4.48 6.42 4.61L6.42 10.69C6.42 11.35 6.55 11.99 6.82 12.6L8.76 17.1C8.82 17.23 8.92 17.3 9.06 17.31C9.2 17.32 9.31 17.26 9.39 17.14L9.56 16.87C9.59 16.83 9.61 16.77 9.61 16.71L9.61 14.96C9.61 14.77 9.63 14.58 9.66 14.39C9.7 14.2 9.76 14.02 9.83 13.84C9.9 13.66 10 13.5 10.1 13.34C10.21 13.18 10.33 13.03 10.47 12.89C10.6 12.76 10.75 12.63 10.91 12.53C11.07 12.42 11.24 12.33 11.42 12.26C11.6 12.18 11.78 12.13 11.97 12.09C12.16 12.05 12.35 12.03 12.55 12.03L15.28 12.03C15.42 12.03 15.56 12.02 15.69 11.99C15.82 11.97 15.96 11.93 16.08 11.87C16.21 11.82 16.33 11.76 16.44 11.68C16.56 11.61 16.66 11.52 16.76 11.42C16.85 11.33 16.94 11.22 17.02 11.11C17.09 11 17.16 10.88 17.21 10.75C17.26 10.62 17.3 10.5 17.33 10.36C17.35 10.23 17.37 10.09 17.37 9.96C17.37 9.38 17.28 8.83 17.11 8.28C16.94 7.74 16.69 7.23 16.36 6.76L14.73 4.44C14.53 4.16 14.3 3.91 14.04 3.69C13.79 3.46 13.51 3.27 13.2 3.11C12.9 2.96 12.58 2.84 12.25 2.76C11.92 2.68 11.58 2.63 11.24 2.63L8.4 2.64Z"
                      fill="currentColor"
                      fill-opacity="1.000000"
                      fill-rule="nonzero"
                    ></path>
                  </g>
                </svg>
              </button>
            </el-tooltip>
          </div>
        </div>
      </template>

      <div v-show="showNewChatBtn" class="open-newChart">
        <button class="button-empty-style" @click="OPEN_newChat">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5.856 17.121a.979.979 0 0 1-.327-.06.839.839 0 0 1-.283-.177.739.739 0 0 1-.187-.255.724.724 0 0 1-.07-.303l-.02-1.609a4.663 4.663 0 0 1-1.446-.455 4.252 4.252 0 0 1-.637-.401c-.199-.146-.385-.31-.553-.492a4.442 4.442 0 0 1-.45-.577 4.303 4.303 0 0 1-.327-.637 3.823 3.823 0 0 1-.206-.686 3.729 3.729 0 0 1-.064-.704V6.478c0-.261.025-.516.077-.771a4.43 4.43 0 0 1 .244-.747 4.062 4.062 0 0 1 .932-1.28c.2-.183.418-.347.65-.493.23-.145.482-.267.739-.364a4.21 4.21 0 0 1 .81-.225c.27-.054.553-.078.835-.078H8.55c.103 0 .2.018.29.054a.7.7 0 0 1 .411.376.667.667 0 0 1-.161.766.736.736 0 0 1-.25.151.764.764 0 0 1-.29.055H5.573c-.186 0-.366.012-.54.049-.18.03-.353.079-.52.145-.167.061-.328.14-.482.237-.148.091-.29.2-.418.316a2.897 2.897 0 0 0-.347.388c-.097.14-.187.286-.257.444a2.473 2.473 0 0 0-.206.977v4.287c0 .17.013.333.051.503a2.549 2.549 0 0 0 .772 1.33 2.721 2.721 0 0 0 .913.559c.167.066.347.115.527.152.18.03.36.048.546.048a.904.904 0 0 1 .61.23.848.848 0 0 1 .194.262.84.84 0 0 1 .07.303l.007.99 1.915-1.293a2.877 2.877 0 0 1 1.64-.492h2.372c.186 0 .366-.018.54-.048.18-.03.353-.08.52-.146.168-.067.329-.146.483-.237.148-.091.29-.2.418-.316.128-.121.244-.249.347-.388a2.8 2.8 0 0 0 .257-.444 2.47 2.47 0 0 0 .206-.977V8.585a.646.646 0 0 1 .225-.492.679.679 0 0 1 .244-.152.814.814 0 0 1 .585 0c.09.03.174.085.244.152a.657.657 0 0 1 .225.492V10.8c0 .261-.032.516-.083.771a4.192 4.192 0 0 1-.245.74c-.109.244-.244.468-.398.687a3.735 3.735 0 0 1-.534.6c-.2.183-.418.347-.65.493a4.134 4.134 0 0 1-.738.364 4.7 4.7 0 0 1-.81.225c-.27.054-.553.079-.836.079h-1.877c-.604 0-1.144.164-1.633.491l-2.54 1.713a.913.913 0 0 1-.514.157z"
              fill="currentColor"
            ></path>
            <path
              d="M15.866 4.125h-4.174c-.41 0-.741.313-.741.7 0 .387.332.7.741.7h4.174c.41 0 .742-.313.742-.7 0-.387-.332-.7-.742-.7z"
              fill="currentColor"
            ></path>
            <path
              d="M14.537 2.932c0-.396-.34-.717-.759-.717s-.758.32-.758.717v3.786c0 .396.34.717.758.717.42 0 .76-.321.76-.717V2.932z"
              fill="currentColor"
            ></path>
          </svg>
          <span>开启新对话</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
// import { init } from 'ityped'
// import { chatList } from './data'
// util
import { typed } from '@/utils/typeWriter.js'
import { isImageByMIME, formatFileSize, getFileExtension, isImageByExtension } from '@/utils/file'
import { copyToClipboard } from '@/utils/copy'

// store
// 对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('index')

export default {
  name: 'chatList',

  components: { MarkdownItVue },

  data: () => ({
    showNewChatBtn: true,
    scorlling: false
  }),

  computed: {
    loadingChat() {
      return this.$store.state.index.loadingChat
    },

    chatList() {
      return this.$store.state.index.chatList
      // return []
    }
  },

  watch: {
    chatList: {
      handler(v) {
        // 回显不需要执行打印效果
        if (this.$store.state.index.isRenderChatList) {
          this.$nextTick(() => this.scrollBottom())
          return
        }

        // console.log(1111, v)
        this.showNewChatBtn = false
        const cur = v.at(-1)
        this.$nextTick(() => this.scrollBottom())
        if (cur.loadingChat) return

        /* 先打印思考，思考完后打印答案 */
        typed(cur.thoughts, {
          renderText: text => {
            cur.thoughts_reveal = text
            this.scrollBottom()
          },
          onComplete: () => {
            cur.showSplitLine = true

            typed(cur.answer, {
              renderText: text => {
                cur.answer_reveal = text
                this.scrollBottom()
              },
              onComplete: () => {
                cur.showBtns = true
                this.showNewChatBtn = true
                this.$nextTick(() => this.scrollBottom())
              }
            })
          }
        })

        /* 如果 length 为 1，说明是第一次问问题，更新左侧栏对话记录 */
        if (v.length === 1) {
          this.$bus.$emit('update-dialog-history')
        }
      },
      immediate: true
    }
  },

  methods: {
    ...mapMutations(['OPEN_newChat']),

    isImageByMIME,
    formatFileSize,
    getFileExtension,
    isImageByExtension,

    scrollBottom() {
      if (this.scorlling) return
      const ele = this.$refs.chatListWrapRef
      if (!ele) return
      if (ele.scrollHeight === ele.clientHeight) return
      this.scorlling = true
      this.$nextTick(() => {
        ele.scrollTop = ele.scrollHeight - ele.clientHeight
        this.scorlling = false
      })
    },

    handleChatCopy(cl) {
      copyToClipboard(cl.answer, () => {
        this.$message.success('复制成功')
      })
    },

    handleChatReBuild(cl) {
      // console.log(cl, this)
      this.$bus.$emit('chat-rebuild', cl)
    }
  }
}
</script>

<style lang="less" scoped></style>
